<template>
  <div class="appearance-settings">
    <div class="settings-section">
      <div class="section-header">
        <h3>外观设置</h3>
        <p>自定义系统的外观和主题</p>
      </div>

      <!-- 主题色彩 -->
      <div class="setting-group">
        <div class="setting-label">
          <el-icon><Sunny /></el-icon>
          <span>主题色彩</span>
        </div>
        <div class="theme-options">
          <div 
            class="theme-option"
            :class="{ active: !themeStore.isDark }"
            @click="themeStore.setTheme('light')"
          >
            <div class="theme-preview light-preview">
              <div class="preview-header"></div>
              <div class="preview-content">
                <div class="preview-sidebar"></div>
                <div class="preview-main"></div>
              </div>
            </div>
            <span class="theme-name">浅色</span>
          </div>
          
          <div 
            class="theme-option"
            :class="{ active: themeStore.isDark }"
            @click="themeStore.setTheme('dark')"
          >
            <div class="theme-preview dark-preview">
              <div class="preview-header"></div>
              <div class="preview-content">
                <div class="preview-sidebar"></div>
                <div class="preview-main"></div>
              </div>
            </div>
            <span class="theme-name">深色</span>
          </div>
          
          <div 
            class="theme-option"
            :class="{ active: systemSettings.autoTheme }"
            @click="toggleAutoTheme"
          >
            <div class="theme-preview system-preview">
              <div class="preview-header">
                <div class="auto-indicator">自动</div>
              </div>
              <div class="preview-content">
                <div class="preview-sidebar half-light"></div>
                <div class="preview-main half-dark"></div>
              </div>
            </div>
            <span class="theme-name">系统</span>
          </div>
        </div>
      </div>

      <!-- Logo设置 -->
      <div class="setting-group">
        <div class="setting-label">
          <el-icon><Picture /></el-icon>
          <span>Logo设置</span>
        </div>
        <div class="logo-upload">
          <el-upload
            class="logo-uploader"
            action=""
            :show-file-list="false"
            :before-upload="handleLogoUpload"
            accept="image/*"
          >
            <div class="upload-area">
              <el-icon class="upload-icon"><Plus /></el-icon>
              <div class="upload-text">点击上传 Logo</div>
            </div>
          </el-upload>
        </div>
      </div>

      <!-- 页面布局 -->
      <div class="setting-group">
        <div class="setting-label">
          <el-icon><Grid /></el-icon>
          <span>页面布局</span>
        </div>
        <div class="layout-options">
          <div 
            class="layout-option"
            :class="{ active: systemSettings.layout === 'sidebar' }"
            @click="setLayout('sidebar')"
          >
            <div class="layout-preview">
              <div class="layout-sidebar"></div>
              <div class="layout-content"></div>
            </div>
            <span class="layout-name">侧边栏</span>
          </div>
          
          <div 
            class="layout-option"
            :class="{ active: systemSettings.layout === 'top' }"
            @click="setLayout('top')"
          >
            <div class="layout-preview">
              <div class="layout-header"></div>
              <div class="layout-content"></div>
            </div>
            <span class="layout-name">顶部栏</span>
          </div>
          
          <div 
            class="layout-option"
            :class="{ active: systemSettings.layout === 'mix' }"
            @click="setLayout('mix')"
          >
            <div class="layout-preview">
              <div class="layout-header"></div>
              <div class="layout-body">
                <div class="layout-sidebar"></div>
                <div class="layout-content"></div>
              </div>
            </div>
            <span class="layout-name">混合布局</span>
          </div>
          
          <div 
            class="layout-option"
            :class="{ active: systemSettings.layout === 'double' }"
            @click="setLayout('double')"
          >
            <div class="layout-preview">
              <div class="layout-sidebar"></div>
              <div class="layout-sub-sidebar"></div>
              <div class="layout-content"></div>
            </div>
            <span class="layout-name">双列</span>
          </div>
        </div>
      </div>

      <!-- 系统主题色 -->
      <div class="setting-group">
        <div class="setting-label">
          <el-icon><Brush /></el-icon>
          <span>系统主题色</span>
        </div>
        <div class="color-options">
          <div 
            v-for="color in themeColors"
            :key="color.name"
            class="color-option"
            :class="{ active: systemSettings.primaryColor === color.value }"
            @click="setPrimaryColor(color.value)"
            :style="{ backgroundColor: color.value }"
          >
            <el-icon v-if="systemSettings.primaryColor === color.value" class="check-icon">
              <Check />
            </el-icon>
          </div>
        </div>
      </div>

      <!-- 导航固定 -->
      <div class="setting-group">
        <div class="setting-item">
          <div class="setting-info">
            <div class="setting-title">导航固定</div>
            <div class="setting-desc">固定导航栏位置</div>
          </div>
          <el-switch
            v-model="systemSettings.fixedHeader"
            @change="updateSetting('fixedHeader', $event)"
            :active-text="systemSettings.fixedHeader ? '固定' : '不固定'"
          />
        </div>
      </div>

      <!-- 页面动画 -->
      <div class="setting-group">
        <div class="setting-item">
          <div class="setting-info">
            <div class="setting-title">页面动画</div>
            <div class="setting-desc">开启页面切换动画效果</div>
          </div>
          <el-switch
            v-model="systemSettings.pageAnimation"
            @change="updateSetting('pageAnimation', $event)"
            :active-text="systemSettings.pageAnimation ? '开启' : '关闭'"
          />
        </div>
      </div>

      <!-- 盒子样式 -->
      <div class="setting-group">
        <div class="setting-label">
          <el-icon><Box /></el-icon>
          <span>盒子样式</span>
        </div>
        <div class="box-style-options">
          <div 
            class="box-style-option"
            :class="{ active: systemSettings.cardStyle === 'border' }"
            @click="setCardStyle('border')"
          >
            <div class="box-preview border-style"></div>
            <span>边框</span>
          </div>
          
          <div 
            class="box-style-option"
            :class="{ active: systemSettings.cardStyle === 'shadow' }"
            @click="setCardStyle('shadow')"
          >
            <div class="box-preview shadow-style"></div>
            <span>阴影</span>
          </div>
        </div>
      </div>

      <!-- 容器宽度 -->
      <div class="setting-group">
        <div class="setting-label">
          <el-icon><Monitor /></el-icon>
          <span>容器宽度</span>
        </div>
        <div class="width-control">
          <el-slider
            v-model="systemSettings.containerWidth"
            :min="1200"
            :max="1920"
            :step="20"
            show-stops
            show-input
            @change="updateSetting('containerWidth', $event)"
          />
          <div class="width-presets">
            <el-button 
              size="small" 
              @click="setContainerWidth(1200)"
              :type="systemSettings.containerWidth === 1200 ? 'primary' : ''"
            >
              1200px
            </el-button>
            <el-button 
              size="small" 
              @click="setContainerWidth(1400)"
              :type="systemSettings.containerWidth === 1400 ? 'primary' : ''"
            >
              1400px
            </el-button>
            <el-button 
              size="small" 
              @click="setContainerWidth(1600)"
              :type="systemSettings.containerWidth === 1600 ? 'primary' : ''"
            >
              1600px
            </el-button>
            <el-button 
              size="small" 
              @click="setContainerWidth(1920)"
              :type="systemSettings.containerWidth === 1920 ? 'primary' : ''"
            >
              全屏
            </el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, watch } from 'vue'
import { useThemeStore } from '@/stores/theme'
import { ElMessage } from 'element-plus'
import { 
  Sunny, 
  Picture, 
  Grid, 
  Brush, 
  Box, 
  Monitor, 
  Check, 
  Plus 
} from '@element-plus/icons-vue'

const themeStore = useThemeStore()

// 系统设置
const systemSettings = reactive({
  autoTheme: false,
  layout: 'sidebar',
  primaryColor: '#409EFF',
  fixedHeader: true,
  pageAnimation: true,
  cardStyle: 'shadow',
  containerWidth: 1400
})

// 主题色选项
const themeColors = [
  { name: '默认蓝', value: '#409EFF' },
  { name: '紫色', value: '#6366f1' },
  { name: '蓝色', value: '#2563eb' },
  { name: '绿色', value: '#16a34a' },
  { name: '青色', value: '#0891b2' },
  { name: '橙色', value: '#ea580c' },
  { name: '粉色', value: '#e91e63' }
]

// 切换自动主题
const toggleAutoTheme = () => {
  systemSettings.autoTheme = !systemSettings.autoTheme
  if (systemSettings.autoTheme) {
    // 检测系统主题
    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)')
    themeStore.setTheme(mediaQuery.matches ? 'dark' : 'light')
    
    // 监听系统主题变化
    mediaQuery.addEventListener('change', (e) => {
      if (systemSettings.autoTheme) {
        themeStore.setTheme(e.matches ? 'dark' : 'light')
      }
    })
  }
  
  updateSetting('autoTheme', systemSettings.autoTheme)
}

// 设置布局
const setLayout = (layout) => {
  systemSettings.layout = layout
  updateSetting('layout', layout)
  ElMessage.success(`已切换到${getLayoutName(layout)}`)
}

// 获取布局名称
const getLayoutName = (layout) => {
  const names = {
    sidebar: '侧边栏布局',
    top: '顶部栏布局', 
    mix: '混合布局',
    double: '双列布局'
  }
  return names[layout] || layout
}

// 设置主题色
const setPrimaryColor = (color) => {
  systemSettings.primaryColor = color
  updateSetting('primaryColor', color)
  
  // 应用主题色到CSS变量
  document.documentElement.style.setProperty('--el-color-primary', color)
  
  ElMessage.success('主题色已更新')
}

// 设置卡片样式
const setCardStyle = (style) => {
  systemSettings.cardStyle = style
  updateSetting('cardStyle', style)
  ElMessage.success(`已切换到${style === 'border' ? '边框' : '阴影'}样式`)
}

// 设置容器宽度
const setContainerWidth = (width) => {
  systemSettings.containerWidth = width
  updateSetting('containerWidth', width)
  
  // 应用容器宽度
  const container = document.querySelector('.main-layout')
  if (container) {
    container.style.maxWidth = width === 1920 ? 'none' : `${width}px`
  }
}

// 处理Logo上传
const handleLogoUpload = (file) => {
  const isImage = file.type.indexOf('image/') === 0
  if (!isImage) {
    ElMessage.error('只能上传图片文件!')
    return false
  }
  
  const isLt2M = file.size / 1024 / 1024 < 2
  if (!isLt2M) {
    ElMessage.error('图片大小不能超过 2MB!')
    return false
  }
  
  // 这里处理图片上传逻辑
  ElMessage.success('Logo上传成功!')
  return false // 阻止自动上传
}

// 更新设置
const updateSetting = (key, value) => {
  // 保存到localStorage
  const settings = JSON.parse(localStorage.getItem('systemSettings') || '{}')
  settings[key] = value
  localStorage.setItem('systemSettings', JSON.stringify(settings))
}

// 加载保存的设置
const loadSettings = () => {
  const savedSettings = localStorage.getItem('systemSettings')
  if (savedSettings) {
    const settings = JSON.parse(savedSettings)
    Object.assign(systemSettings, settings)
    
    // 应用保存的设置
    if (settings.primaryColor) {
      setPrimaryColor(settings.primaryColor)
    }
    if (settings.containerWidth) {
      setContainerWidth(settings.containerWidth)
    }
  }
}

onMounted(() => {
  loadSettings()
})
</script>

<style scoped>
.appearance-settings {
  padding: 0;
}

.settings-section {
  background: var(--el-bg-color);
  border-radius: 12px;
  padding: 24px;
  border: 1px solid var(--el-border-color-light);
}

.section-header {
  margin-bottom: 32px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--el-border-color-lighter);
}

.section-header h3 {
  margin: 0 0 8px 0;
  font-size: 20px;
  font-weight: 600;
  color: var(--el-text-color-primary);
}

.section-header p {
  margin: 0;
  color: var(--el-text-color-secondary);
  font-size: 14px;
}

.setting-group {
  margin-bottom: 32px;
}

.setting-label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  font-size: 16px;
  font-weight: 600;
  color: var(--el-text-color-primary);
}

/* 主题选项 */
.theme-options {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.theme-option {
  cursor: pointer;
  text-align: center;
  transition: all 0.3s ease;
}

.theme-option.active .theme-preview {
  border-color: var(--el-color-primary);
  box-shadow: 0 0 0 2px var(--el-color-primary-light-9);
}

.theme-preview {
  width: 100%;
  height: 80px;
  border: 2px solid var(--el-border-color-light);
  border-radius: 8px;
  margin-bottom: 8px;
  overflow: hidden;
  transition: all 0.3s ease;
}

.light-preview {
  background: #ffffff;
}

.light-preview .preview-header {
  height: 16px;
  background: #f8f9fa;
}

.light-preview .preview-content {
  display: flex;
  height: 64px;
}

.light-preview .preview-sidebar {
  width: 30%;
  background: #e9ecef;
}

.light-preview .preview-main {
  flex: 1;
  background: #ffffff;
}

.dark-preview {
  background: #141414;
}

.dark-preview .preview-header {
  height: 16px;
  background: #1f1f1f;
}

.dark-preview .preview-content {
  display: flex;
  height: 64px;
}

.dark-preview .preview-sidebar {
  width: 30%;
  background: #2d2d2d;
}

.dark-preview .preview-main {
  flex: 1;
  background: #141414;
}

.system-preview {
  position: relative;
  background: linear-gradient(135deg, #ffffff 50%, #141414 50%);
}

.system-preview .auto-indicator {
  position: absolute;
  top: 4px;
  right: 4px;
  background: var(--el-color-primary);
  color: white;
  font-size: 10px;
  padding: 2px 4px;
  border-radius: 4px;
  z-index: 1;
}

.system-preview .preview-content {
  display: flex;
  height: 64px;
}

.system-preview .half-light {
  width: 50%;
  background: #e9ecef;
}

.system-preview .half-dark {
  width: 50%;
  background: #2d2d2d;
}

.theme-name {
  font-size: 14px;
  color: var(--el-text-color-regular);
}

/* Logo上传 */
.logo-upload {
  max-width: 200px;
}

.logo-uploader .upload-area {
  width: 150px;
  height: 80px;
  border: 2px dashed var(--el-border-color);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
}

.logo-uploader .upload-area:hover {
  border-color: var(--el-color-primary);
  background: var(--el-color-primary-light-9);
}

.upload-icon {
  font-size: 24px;
  color: var(--el-text-color-placeholder);
  margin-bottom: 8px;
}

.upload-text {
  font-size: 12px;
  color: var(--el-text-color-secondary);
}

/* 布局选项 */
.layout-options {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.layout-option {
  cursor: pointer;
  text-align: center;
  transition: all 0.3s ease;
}

.layout-option.active .layout-preview {
  border-color: var(--el-color-primary);
  box-shadow: 0 0 0 2px var(--el-color-primary-light-9);
}

.layout-preview {
  width: 100%;
  height: 60px;
  border: 2px solid var(--el-border-color-light);
  border-radius: 6px;
  margin-bottom: 8px;
  background: var(--el-fill-color-lighter);
  overflow: hidden;
  transition: all 0.3s ease;
}

.layout-sidebar {
  width: 20px;
  height: 100%;
  background: var(--el-color-primary-light-7);
  float: left;
}

.layout-content {
  flex: 1;
  height: 100%;
  background: var(--el-fill-color-light);
}

.layout-header {
  width: 100%;
  height: 12px;
  background: var(--el-color-primary-light-7);
}

.layout-body {
  display: flex;
  height: 48px;
}

.layout-sub-sidebar {
  width: 15px;
  height: 100%;
  background: var(--el-color-primary-light-8);
  float: left;
}

.layout-name {
  font-size: 12px;
  color: var(--el-text-color-regular);
}

/* 颜色选项 */
.color-options {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.color-option {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  border: 2px solid transparent;
}

.color-option:hover {
  transform: scale(1.1);
}

.color-option.active {
  border-color: var(--el-text-color-primary);
}

.check-icon {
  color: white;
  font-size: 16px;
}

/* 设置项 */
.setting-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 0;
}

.setting-info {
  flex: 1;
}

.setting-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--el-text-color-primary);
  margin-bottom: 4px;
}

.setting-desc {
  font-size: 12px;
  color: var(--el-text-color-secondary);
}

/* 盒子样式选项 */
.box-style-options {
  display: flex;
  gap: 24px;
}

.box-style-option {
  cursor: pointer;
  text-align: center;
  transition: all 0.3s ease;
}

.box-style-option.active .box-preview {
  border-color: var(--el-color-primary);
  box-shadow: 0 0 0 2px var(--el-color-primary-light-9);
}

.box-preview {
  width: 60px;
  height: 40px;
  border-radius: 6px;
  margin-bottom: 8px;
  transition: all 0.3s ease;
}

.border-style {
  border: 2px solid var(--el-border-color);
  background: var(--el-bg-color);
}

.shadow-style {
  border: 1px solid var(--el-border-color-lighter);
  background: var(--el-bg-color);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* 宽度控制 */
.width-control {
  padding: 16px 0;
}

.width-presets {
  display: flex;
  gap: 8px;
  margin-top: 16px;
}

/* 响应式 */
@media (max-width: 768px) {
  .theme-options {
    grid-template-columns: 1fr;
  }
  
  .layout-options {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .color-options {
    justify-content: flex-start;
  }
  
  .box-style-options {
    flex-direction: column;
    align-items: flex-start;
  }
}
</style>
